<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        body{
            background-image: url("https://passport.baidu.com/static/passpc-account/img/reg_bg_min.jpg");
            background-size: 100% 720px;
        }
        #i1{
            border: 0px;
            width: 350px;
            height: 200px;
            margin-left: 150px;
            margin-top: 260px;
        }

        #i2{
            border-radius:20px;
            width: 380px;
            height: 480px;
            margin-left:830px;
            margin-top:-380px;
            padding-top:15px;
            background-color: #F1F0F2;
        }
        #i3{
            width: 380px;
            height: 300px;
            margin-top: 45px;
        }
        .c1{
            font-size: 38px;
            color: white;
            font-family:"楷体";
            line-height: 10px;
        }
        .c2{
            width:230px;
            height: 25px;
        }
        .c3{
            width:110px;
            height: 25px;
        }
        .c4{
            width:90px;
            height: 25px;
        }
        #i5{
            width: 300px;
            height: 40px;
            background-color:#BDCEFC;
            border-radius:10px;
            border: 0px;
        }
        #i6{
            margin-left: 20px;
        }
        .cc{
            height: 55px;
            width: 360px;
            padding-left: 20px;
        }
        #i4{
            height: 40px;
            width: 320px;
            margin-left: 20px;
            margin-top: 10px;
        }
        span{
            color: red;
            font-size: 6px;
            padding-left: 20%;
        }

    </style>
</head>
<body>
<div id="i1">
    <p class="c1"><b>用科技</b><p>
    <p class="c1">让复杂的世界更简单</p>
</div>
<div id="i2">
    <div id="i6">
        <h1>欢迎注册</h1>
        <p>已有账号?<a href="login.html">登录</a></p>
    </div>
    <div id="i3">
        <form action="UserAddServlet" method="post">
            <div class="cc">
                用户名:&emsp;<input type="text" name="userName" placeholder="请设置用户名" class="c2" id="d1">
                <span style="display: none" id="s1">以字母开头，长度在3-6之间，只能包含中文字符</span>
            </div>
            <div class="cc">
                手机号:&emsp;<input type="text" name="phone" placeholder="可用于登录或找回密码" class="c2" id="d2">
                <span style="display: none" id="s2">以数字1开头,长度为11</span>
            </div>
            <div class="cc">
                密&emsp;码:&emsp;<input type="password" name="password" placeholder="请设置登录密码" class="c2" id="d3">
                <span style="display: none" id="s3">以字母开头，长度在6-12之间，只能包含字符、数字和下划线</span>
            </div>
<!--            <div class="cc">-->
<!--                验证码:&emsp;<input type="text" name="##" placeholder="请输入验证码" class="c3">&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="##" value="获取验证码" class="c4">-->
<!--            </div>-->
            <div id="i4" align="center">
                <input type="submit" value="注册" id="i5">
            </div>
        </form>
    </div>
</div>
</body>
<script>
    var d1 = document.getElementById("d1");
    var s1 = document.getElementById("s1");
    var flag1 = false;
    //以字母开头，长度在3-6之间，只能包含中文字符
    var names=/^[a-zA-Z][\u4e00-\u9fa5]{2,5}$/;
    d1.onblur=function () {
        if(names.test(d1.value) == false){
            s1.style.display="block";
            flag1=true;
        }
    }
    d1.onfocus=function () {
        if(flag1==true){
            s1.style.display="none";
            flag1=false;
        }
    }
    //手机号校验
    var ph=/^1[3456789]\d{9}$/;
    var d2 = document.getElementById("d2");
    var s2 = document.getElementById("s2");
    var flag2 = false;
    d2.onblur=function (){

        if(ph.test(d2.value)== false){
            s2.style.display="block";
            flag2=true;
        }
    }
    d2.onfocus=function () {
        if(flag2==true){
            s2.style.display="none";
            flag2=false;
        }
    }
    //以字母开头，长度在6-12之间，只能包含字符、数字和下划线。
    var pw=/^[a-zA-Z]\w{5,11}$/;
    var d3 = document.getElementById("d3");
    var s3 = document.getElementById("s3");
    var flag3 = false;
    d3.onblur=function (){
        if(pw.test(d3.value)==false){
            s3.style.display="block";
            flag3=true;
        }
    }
    d3.onfocus=function () {
        if(flag3==true){
            s3.style.display="none";
            flag3=false;
        }
    }
</script>
</html>